<template>
  <div class="community-center">
    <!-- 频道导航 -->
    <el-tabs v-model="activeChannel" @tab-click="handleTabClick">
      <el-tab-pane label="科普知识" name="science">
        <science-channel :user-role="userRole" />
      </el-tab-pane>
      <el-tab-pane label="晒宠交流" name="share">
        <share-channel :user="currentUser" />
      </el-tab-pane>
      <el-tab-pane label="动物救助" name="rescue">
        <rescue-channel :user="currentUser" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import ScienceChannel from "@/views/Community-Center/ScienceChannel.vue";
import ShareChannel from "@/views/Community-Center/ShareChannel.vue";
import RescueChannel from "@/views/Community-Center/RescueChannel.vue";

export default {
  components: { ScienceChannel, ShareChannel, RescueChannel},
  data() {
    return {
      activeChannel: 'science',
      currentUser: {
        id: 123,
        name: '用户示例',
        role: 'user', // user | doctor
        isLogin: true
      }
    }
  },

  computed: {
    userRole() {
      return this.currentUser.role
    }
  },
  methods: {
    handleTabClick(tab) {
      console.log('切换到频道:', tab.name)
    }
  }

}
</script>